<template>
      
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="24">
        <el-col :span="4">
          <el-select
            v-model="queryInfo.query.depart"
            placeholder="请选择部门"
            clearable
            @clear="getalljzgchuqin"
          >
            <el-option
              v-for="item in Alldepartment"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> </el-col
        ><el-col :span="4">
          <el-select
            v-model="queryInfo.query.level"
            placeholder="请选择级别"
            clearable
            @clear="getalljzgchuqin"
          >
            <el-option
              v-for="item in jiebie_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> </el-col
        ><el-col :span="4">
          <el-select
            v-model="queryInfo.query.zhiwei"
            placeholder="职位:部门不为学院"
            :disabled="is_xueyuan"
            clearable
            @clear="getalljzgchuqin"
          >
            <el-option
              v-for="item in xueyuan_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> </el-col
        ><el-col :span="4">
          <el-select
            v-model="queryInfo.query.teacher"
            placeholder="教职工:请先选部门级别职位"
            :disabled="is_jzg"
            clearable
            @clear="getalljzgchuqin"
          >
            <el-option
              v-for="item in jzg_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2"
          ><el-button type="primary" round @click="getalljzgchuqin"
            >搜索</el-button
          ></el-col
        ><el-col :span="4">
          <el-button
            type="primary"
            icon="el-icon-bell"
            size="small"
            @click="infoNotify"
            :disabled="selectionItem.length === 0 ? true : false"
          >
            发送提醒
          </el-button></el-col
        ></el-row
      ><el-row>
        <el-col :span="3">
          <el-date-picker
            v-model="queryInfo.query.start_date"
            type="date"
            placeholder="选择开始日期"
          >
          </el-date-picker
        ></el-col>
        <el-col :span="3">
          <el-date-picker
            v-model="queryInfo.query.end_date"
            type="date"
            placeholder="选择结束日期"
          >
          </el-date-picker></el-col
      ></el-row>
      <!-- <yuefenhuoqu /> -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="dataTable"
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'attendance_date', order: 'descending' }"
      >
        <el-table-column type="selection" :selectable="selectedRow">
        </el-table-column>
        <el-table-column prop="user_name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="attendance_date" label="打卡日期" align="center">
        </el-table-column>
        <el-table-column label="打卡记录" align="center">
          <template slot-scope="scope">
            <div
              :class="{
                red:
                  scope.row.status === '早退' ||
                  scope.row.status === '迟到' ||
                  scope.row.status === '未签到' ||
                  scope.row.status === '下班未签到' ||
                  scope.row.status === '迟到早退' ||
                  scope.row.status === '迟到下班未签到',
                blue:
                  scope.row.status === '请假' ||
                  scope.row.status === '补打卡' ||
                  scope.row.status === '放假' ||
                  scope.row.status === '正常签到',
              }"
            >
              <span>{{ scope.row.updated_start_time }}</span>
              <span>,</span>
              <span>{{ scope.row.updated_end_time }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="工作时长(h)" align="center">
          <template slot-scope="scope">
            <span
              :class="{
                red:
                  scope.row.status === '早退' ||
                  scope.row.status === '迟到' ||
                  scope.row.status === '未签到' ||
                  scope.row.status === '下班未签到' ||
                  scope.row.status === '迟到早退' ||
                  scope.row.status === '迟到下班未签到',
                blue:
                  scope.row.status === '请假' ||
                  scope.row.status === '补打卡' ||
                  scope.row.status === '放假' ||
                  scope.row.status === '正常签到',
              }"
            >
              {{ (scope.row.updated_duration / 3600).toFixed(1) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          column-key="status"
          :filters="tableStatus"
          align="center"
        >
          <template slot-scope="scope">
            <span
              :class="{
                red:
                  scope.row.status === '早退' ||
                  scope.row.status === '迟到' ||
                  scope.row.status === '未签到' ||
                  scope.row.status === '下班未签到' ||
                  scope.row.status === '迟到早退' ||
                  scope.row.status === '迟到下班未签到',
                blue:
                  scope.row.status === '请假' ||
                  scope.row.status === '补打卡' ||
                  scope.row.status === '放假' ||
                  scope.row.status === '正常签到',
              }"
            >
              {{ scope.row.status }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                icon="el-icon-edit"
                size="small"
                @click="openEditDialog(scope.row)"
              >
              </el-button>
              <el-button
                icon="el-icon-more"
                size="small"
                @click="openDisplayInfo(scope.row)"
              >
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
          
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryInfo.total"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="状态更改"
      :visible.sync="editDialogVisible"
      width="50%"
      :before-close="editHandleClose"
    >
      <el-row :gutter="20" class="statusEdit">
        <el-col :span="4" :offset="3">
          <div>原始状态</div>
        </el-col>
        <el-col :span="16">
          <div class="">
            {{ oldStatus }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="statusEdit">
        <el-col :span="4" :offset="3">
          <div class="editStatusDistance">更改状态</div>
        </el-col>
        <el-col :span="16">
          <el-select
            v-model="newStatus"
            placeholder="请选择"
            size="small"
            class="changeStatus"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="statusEdit" v-if="newStatus === '补打卡'">
        <el-col :span="4" :offset="3">
          <div class="editStatusDistance">打卡时间</div>
        </el-col>
        <el-col :span="16">
          <el-time-picker
            is-range
            v-model="patchTime"
            range-separator="～"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择打卡时间"
            format="HH:mm"
            value-format="HH:mm"
            size="small"
            @change="handlePatchTime"
          >
          </el-time-picker>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editHandleClose">取 消</el-button>
        <el-button type="primary" @click="submitEditDialog">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="userAttendanceName + ' 出勤详情'"
      :visible.sync="displayDialogVisible"
      width="50%"
      :before-close="displayHandleClose"
    >
      <el-descriptions class="margin-top" title="出勤信息" :column="4" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            早退 </template
          >{{ tongji[0] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            迟到
          </template>
          {{ tongji[1] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            请假
          </template>
          {{ tongji[2] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            放假
          </template>
          {{ tongji[3] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            未签到
          </template>
          {{ tongji[4] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            补签到
          </template>
          {{ tongji[5] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            正常上班
          </template>
          {{ tongji[6] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            下班未签到
          </template>
          {{ tongji[7] }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table
        :data="displayTableData"
        stripe
        class="displayTable"
        style="width: 100%"
      >
        <el-table-column prop="attendance_date" label="日期" align="center">
        </el-table-column>
        <el-table-column label="打卡记录" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.updated_start_time }}</span>
            <span>,</span>
            <span>{{ scope.row.updated_end_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工作时长(h)" align="center">
          <span slot-scope="scope">{{
            (scope.row.updated_duration / 3600).toFixed(1)
          }}</span> </el-table-column
        ><el-table-column prop="status" label="状态" align="center">
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                icon="el-icon-edit"
                size="small"
                @click="openEditDialog2(scope.row)"
              >
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="xiangqing_fenye.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="xiangqing_fenye.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="xiangqing_fenye.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import { getAllDepartment, get_filter_depa_jzg } from "network/api/department";
import yuefenhuoqu from "components/yuefenhuoqu";
import {jieshou_content} from 'network/api/adminuser'
import {
  getchuqindata,
  getalljzgchuqin,
  editbudaka,
} from "network/api/punchcard";

export default {
  props: {},
  data() {
    return {
      queryInfo: {
        query: {
          depart: "",
          level: "",
          zhiwei: "",
          teacher: "",
          datetime: "",
          //   datetime2: "",
          start_date: "",
          end_date: "",
        },
        total: 0,
        pagesize: 5,
        pagenum: 1,
      },
      Alldepartment: [],
      jzg_list: [],
      is_xueyuan: true,
      is_jzg: true,
      jiebie_options: [
        { value: 1, label: "一级" },
        { value: 2, label: "二级" },
        { value: 3, label: "三级" },
      ],
      xueyuan_options: [
        { value: "就业", label: "就业" },
        { value: "教学", label: "教学" },
        { value: "学管", label: "学管" },
      ],
      chuqin_data: {},
      tableData: [],
      //个人出勤详情的数据
      displayTableData: [],
      //个人出勤详情的统计
      tongji:[],
      //信息被选中的列表
      selectionItem: [],
      //
      tableStatus: [
        //       早退   迟到   请假   未签到   下班未签到   正常签到  补打卡
        { text: "早退", value: "早退" },
        { text: "迟到", value: "迟到" },
        { text: "请假", value: "请假" },
        { text: "放假", value: "放假" },
        { text: "未签到", value: "未签到" },
        { text: "下班未签到", value: "下班未签到" },
        { text: "正常签到", value: "正常签到" },
        { text: "补打卡", value: "补打卡" },
      ],
      displayDialogVisible: false,
      //出勤详情的名字
      userAttendanceName: "",
      //展示个人出勤详情的当前页
      xiangqing_fenye: {
        total: 0,
        pagesize: 5,
        pagenum: 1,
        id: null,
        user_name: "",
      },
      //编辑对话框的展示与退出
      editDialogVisible: false,
      //原始状态
      oldStatus: "",
      // 新状态
      newStatus: "补打卡",
      // 确定修改id
      editId: "",
      // 确定修改日期
      editdate: "",
      //状态选择器内备选项
      statusOptions: [
        {
          value: "补打卡",
          label: "补打卡",
        },
      ],
      //打卡时间初始值
      patchTime: ["08:00", "18:00"],
    };
  },
  watch: {
    "queryInfo.query.depart": function (val) {
      this.Alldepartment.forEach((item) => {
        if (item.value == val) {
          this.is_xueyuan = !item.is_xueyuan;
          if (this.is_xueyuan) {
            this.queryInfo.query.zhiwei = "";
          }
        }
      });
    },
    "queryInfo.query": {
      handler: async function (val) {
        if (this.is_xueyuan & (val.depart == "" || val.level == "")) {
          this.is_jzg = true;
          return;
        } else if (
          (this.is_xueyuan == false) &
          (val.depart == "" || val.level == "" || val.zhiwei == "")
        ) {
          this.is_jzg = true;
          return;
        }
        if (this.is_xueyuan) {
          if ((val.depart != "") & (val.level != "")) {
            const res = await get_filter_depa_jzg({
              depart: val.depart,
              level: val.level,
            });
            this.is_jzg = false;
            console.log(res, "教职工信息");
            this.jzg_list = res.msg;
          }
        } else {
          if ((val.depart != "") & (val.level != "") & (val.zhiwei != "")) {
            const res = await get_filter_depa_jzg({
              depart: val.depart,
              level: val.level,
              zhiwei: val.zhiwei,
            });
            this.is_jzg = false;
            console.log(res, "教职工信息");
            this.jzg_list = res.msg;
          }
        }
      },
      deep: true,
    },
    //     "queryInfo.query.start_date": function (val) {
    //       if ((val != "") & (val != null)) {
    //         const start_date = this.dateFormat(val[0]);
    //         const end_date = this.dateFormat(val[1]);
    //         console.log(start_date + "," + end_date);
    //         this.queryInfo.query.datetime2 = start_date + "," + end_date;
    //       }
    //     },
  },
  async created() {
    this.getAlldepartment();
    this.getalljzgchuqin();
  },
  mounted() {},
  methods: {
    getAlldepartment() {
      // 获取所有学院
      getAllDepartment().then((msg) => {
        let alldeaprtment = [];
        msg.forEach((item) => {
          let obj = {};
          obj.value = item.id;
          obj.label = item.name;
          obj.is_xueyuan = item.label;
          alldeaprtment.push(obj);
        });
        this.Alldepartment = alldeaprtment;
        console.log(this.Alldepartment, "所有学院数据");
      });
    },
    dateFormat(dateData) {
      var date = new Date(dateData);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d;
      return time;
    },
    // 父页面添加 日期改变的方法
    dateChange(obj) {
      console.log(obj.year + "-" + obj.month + "-" + obj.day);
      this.queryInfo.query.datetime =
        obj.year + "-" + obj.month + "-" + obj.day;
    },
    async getalljzgchuqin() {
      if (
        (this.queryInfo.query.depart == "") &
        (this.queryInfo.query.level != "")
      ) {
        this.$message.error("选择级别了请选择部门");
        return;
      } else if (
        this.is_jzg &
        (this.queryInfo.query.level == "") &
        (this.queryInfo.query.zhiwei != "")
      ) {
        this.$message.error("选择职位了请选择级别");
        return;
      }
      const data = {
        depart: this.queryInfo.query.depart,
        level: this.queryInfo.query.level,
        zhiwei: this.queryInfo.query.zhiwei,
        teacher: this.queryInfo.query.teacher,
      };

      const res = await getalljzgchuqin(
        data,
        this.queryInfo.pagesize,
        this.queryInfo.pagenum
      );
      if (res.status == "No") {
        this.$message.error(res.msg);
      } else {
        this.tableData = res.msg;
        this.queryInfo.total = res.total;
      }
      console.log(res, "出勤数据");
    },

    //处理复选框状态修改
    handleSelectionChange(item) {
      console.log(item);
      this.selectionItem = item;
    },
    //只有状态为异常时，复选框才可以勾选
    selectedRow(row, index) {
      // console.log(index);
      return (
        row.status === "早退" ||
        row.status === "迟到" ||
        row.status === "未签到" ||
        row.status === "下班未签到" ||
        row.status === "迟到早退" ||
        row.status === "迟到下班未签到"
      );
    },
    //展示个人的出勤详情
    async aaaopenDisplayInfo() {
      const date_now = this.dateFormat(new Date());
      if (
        this.queryInfo.query.start_date == "" ||
        this.queryInfo.query.start_date == null
      ) {
        this.$message.error("请选择开始日期");
        return;
      } else if (this.queryInfo.query.start_date == "") {
        this.$message.error("请选择结束日期");
        return;
      } else if (this.dateFormat(this.queryInfo.query.start_date) > date_now) {
        this.$message.error("开始日期不能超过今天");
        return;
      } else if (this.dateFormat(this.queryInfo.query.end_date) > date_now) {
        this.$message.error("结束日期不能超过今天");
        return;
      } else if (
        this.queryInfo.query.end_date < this.queryInfo.query.start_date
      ) {
        this.$message.error("结束日期在开始日期之前");
        return;
      }
      const start_date = this.dateFormat(this.queryInfo.query.start_date);
      const end_date = this.dateFormat(this.queryInfo.query.end_date);
      const datetime = start_date + "," + end_date;
      const res = await getchuqindata(
        this.xiangqing_fenye.id,
        datetime,
        this.xiangqing_fenye.pagesize,
        this.xiangqing_fenye.pagenum
      );

      if (res.status == "No") {
        this.$message.error(res.msg);
        this.displayTableData = [];
        this.tongji=[0,0,0,0,0,0,0,0]
        this.displayDialogVisible = false;
      } else {
        this.displayTableData = res.msg;
        this.tongji = res.tongji
        this.xiangqing_fenye.total = res.total;
        this.userAttendanceName = this.xiangqing_fenye.user_name;
        this.displayDialogVisible = true;
      }
      return true;
    },
    async openDisplayInfo(item) {
      this.editId = item.id;
      this.xiangqing_fenye.id = item.id;
      this.xiangqing_fenye.user_name = item.user_name;
      await this.aaaopenDisplayInfo();
    },
    //关闭个人出勤详情页面
    displayHandleClose() {
      this.userAttendanceName = "";
      this.displaycurrentPage = 1;
      this.displayDialogVisible = false;
    },
    //处理每页显示数量变化的函数
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val;
      this.getalljzgchuqin();
    },
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.getalljzgchuqin();
    },
    //详情: 处理每页显示数量变化的函数
    handleSizeChange2(val) {
      this.xiangqing_fenye.pagesize = val;
      this.aaaopenDisplayInfo();
    },
    handleCurrentChange2(val) {
      this.xiangqing_fenye.pagenum = val;
      this.aaaopenDisplayInfo();
    },
    //如果在下侧的表格中选中了数据，则点击此按钮，可以将选中的信息发给后台
    async infoNotify() {
      const res = await jieshou_content()
      console.log(res,'教职工消息提醒')
      console.log("发送提醒");
    },

    //点击编辑按钮后，打开编辑对话框
    openEditDialog(item) {
      this.oldStatus = item.status;
      this.editId = item.id;
      this.editdate = item.attendance_date;
      this.editDialogVisible = true;
      console.log("打开编辑对话框");
    },
    openEditDialog2(item) {
      this.oldStatus = item.status;
      this.editdate = item.attendance_date;
      this.editDialogVisible = true;
    },
    //关闭对话框之前，先清空数据，最后关闭对话框
    editHandleClose() {
      this.oldStatus = "";
      this.newStatus = "补打卡";
      this.patchTime = ["08:00", "18:00"];
      this.editDialogVisible = false;
      console.log("退出编辑对话框");
    },
    //修改确定时
    async submitEditDialog() {
      console.log(this.patchTime, this.editId, 123);
      const res = await editbudaka(
        this.editId,
        this.editdate,
        this.patchTime[0],
        this.patchTime[1]
      );
      this.getalljzgchuqin();
      this.aaaopenDisplayInfo();
      console.log(res, "补打卡返回数据");
      this.editHandleClose();
    },
    //当打卡时间变化时，触发的事件
    handlePatchTime(item) {
      console.log(item);
    },
  },
  components: { yuefenhuoqu },
};
</script>

<style lang="css">
.dataTable {
    margin: 40px auto;
}
.red {
    color: red;
}
.blue {
    color: #409EFF;
}
.statusEdit {
    padding-bottom: 20px;
}
.changeStatus {
    width: 350px;
}
.editStatusDistance {
    padding-top: 7px;
}
.displayTable {
    margin-bottom: 40px;
}
</style>
